<template>
   <div class="login-container wh-full bg-transparent">
    <a-layout>
      <a-layout-content>
        <div class="login-content bg-transparent  w-600px absolute top-50% left-50% translate-x-[-50%] translate-y-[-50%] p-8">
          <div class="login-header">
            <img src="/vite.svg" alt="logo" class="login-logo" />
            <h1 class="login-title">VNA-Admin 管理系统</h1>
            <p class="login-subtitle">欢迎使用权限管理系统</p>
          </div>

          <a-form
            :model="loginForm"
            :rules="rules"
            ref="loginFormRef"
            class="login-form"
            @finish="handleLogin"
          >
            <a-form-item name="username">
              <a-input
                v-model:value="loginForm.username"
                placeholder="请输入用户名"
                size="large"
              />
            </a-form-item>

            <a-form-item name="password">
              <a-input-password
                v-model:value="loginForm.password"
                placeholder="请输入密码"
                size="large"
              />
            </a-form-item>

            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                size="large"
                :loading="loading"
                class="login-button"
                block
              >
                登录
              </a-button>
            </a-form-item>

            <div class="login-footer">
              <span>还没有账户？</span>
              <a-button type="link" @click="goToRegister">立即注册</a-button>
            </div>
          </a-form>
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import { useLogin } from './index';

// 使用登录组合式函数
const { loading, loginForm, rules, handleLogin, goToRegister } = useLogin();
</script>
